import React from 'react'
import './index.css'

export default function Footer({todoList,setTodoList}) {
    //已完成计数函数
    const getCheckedNum = ()=> {
        return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
    }
    //全部选择逻辑
    const onClickChange = (e)=>{
        //获取点击后的checked
        const changeBox = e.target.checked 
        
        const newtodo = todoList.map(item=>{
            //不能直接设置   item.done = changeBox

            return {...item,done:changeBox}
        })
        
        setTodoList(newtodo)

    }
    //删除已完成任务
    const deleteOver = () => { 
        //删除就用过滤  过滤出来所有的false的选项框！
        setTodoList(todoList.filter(item=>!item.done))
    }
  return (
      <div className="todo-footer">
          <label>
              <input type="checkbox" onClick={onClickChange} checked={getCheckedNum()===todoList.length&&todoList.length !==0}/>
          </label>
          <span>
              <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
          </span>
          <button  onClick={deleteOver} className="btn btn-danger">清除已完成任务</button>
      </div>
  )
}
